<template>
	<view class="center">
		<view class="logo" :hover-class="!login ? 'logo-hover' : ''" style="position: relative;">
			<!-- <view style="position: absolute;right: 40upx;top: 150upx;">
				<text class="cuIcon-settingsfill" style="font-size: 50upx;"></text>
			</view> -->
			<view class="userName">
				<block v-if="login">
					<image class="logo-img" :src="userinfo.userUrl"></image>
				</block>
				<block v-else>
					<view class="logo-img" style="overflow: hidden;">
						<open-data type="userAvatarUrl" class="logo-img"></open-data>
					</view>
				</block>
				<view class="logo-title flex">
					<text class="uer-name">Hi，{{login ? userinfo.userName||'' : '您未登录'}}</text>
				</view>
				<block v-if="!login">
					<button class="login-btn" open-type="getUserInfo" @click.stop="getUserInfo">授权登录</button>
				</block>
			</view>
			<view class="userInfo" v-if="login">
				<view class="userid">
					ID：{{userinfo.userId||''}}
				</view>
				<view class="sex">
					性别：{{userinfo.userSex||''}}
				</view>
			</view>
		</view>

		<block v-if="login">
			<nav-tab :tabTitle="tabTitle" @changeTab='changeTab'></nav-tab>
			<classifyList :hideTitle="true" :classifyListData="list[currentTab]"></classifyList>
			<loadmore :visible="loadding[currentTab]" :index="3" type="red"></loadmore>
			<nomore :visible="pullUpOn[currentTab]" bgcolor="#FFF"></nomore>
		</block>
	</view>
</template>

<script>
	import navTab from '../../components/navTab.vue'
	import classifyList from '../../components/classifyList.vue'
	let that;
	import {
		mapActions,
		mapGetters
	} from "vuex";
	export default {
		components: {
			navTab,
			classifyList
		},
		data() {
			return {
				login: false,
				Token: '',
				userinfo: {},
				userMovieList: [],
				tabTitle: ['点赞', '收藏'],
				pullUpOn: [],
				loadding: [],
				pages: [],
				limit: 6,
				currentTab: 0,
				list: []
			}
		},
		methods: {
			wxLoginStep(code) {
				this.$api.login({
					code
				}).then(res => {
					if (res.code) {
						that.Token = res.data.Token;
					} else {
						this.$common.errorToShow("获取openID异常", function() {
							uni.navigateBack({
								delta: 1
							})
						})
					}
				})
			},
			getUserInfo(res) {
				if (!this.Token) {
					uni.showToast({
						icon: 'none',
						title: '正在加载中，稍等一下',
						duration: 2000
					});
					return
				}
				
				uni.getUserProfile({
					desc: '展示用户信息',
					success: function(infoRes) {
						if(infoRes.errMsg == 'getUserInfo:fail auth deny'){
							that.$common.errorToShow('授权失败')
						}else{
							infoRes.userInfo.Token = that.Token;
							that.toWxLogin(infoRes.userInfo)
						}
					}
				})
			},
			toWxLogin(data) {
				let _this = this
				_this.$api.upinfoLogin(data).then(res => {
					if (res.code) {
						_this.$common.successToShow("登录成功", () => {
							_this.login = true;
							_this.userinfo = res.data[0];
							console.log(_this.userinfo)
							_this.$store.dispatch('setUserInfoAction', res.data[0])
							_this.$store.dispatch('saveUserTokenAction', _this.Token)
							_this.initData()
						})
					} else {
						_this.$common.errorToShow('登录失败，请重试')
					}
				})
			},
			initUserInfo() {
				var that = this
				that.initData()
			},
			initData() {
				this.initpara()
				this.isRequest()
			},
			isRequest() {
				var that = this
				if (this.currentTab == 0) {
					this.getUserPraiseMenu()
				} else {
					this.getUserFollowMenu()
				}
			},
			changeTab(index) {
				if (this.list[this.currentTab].length || this.pullUpOn[this.currentTab]) {
					return;
				}
				this.isRequest()
			},
			getUserPraiseMenu() {
				if (this.pullUpOn[this.currentTab]) return;
				this.$set(this.loadding, this.currentTab, true)
				this.$api.getUserPraiseMenu({
					page: this.pages[this.currentTab],
					limit: this.limit
				}).then(res => {
					if (res.code) {
						this.pages[this.currentTab]++
						this.list[this.currentTab].push(...res.data);
						if (!res.data.length || res.data.length < this.limit) {
							this.$set(this.pullUpOn, this.currentTab, true)
						}
						this.$set(this.loadding, this.currentTab, false)
					} else {
						this.$set(this.loadding, this.currentTab, false)
						this.$set(this.pullUpOn, this.currentTab, true)
					}
				})
			},
			getUserFollowMenu() {
				if (this.pullUpOn[this.currentTab]) return;
				this.$set(this.loadding, this.currentTab, true)
				this.$api.getUserFollowMenu({
					page: this.pages[this.currentTab],
					limit: this.limit
				}).then(res => {
					if (res.code) {
						this.pages[this.currentTab]++
						this.list[this.currentTab].push(...res.data);
						if (!res.data.length || res.data.length < this.limit) {
							this.$set(this.pullUpOn, this.currentTab, true)
						}
						this.$set(this.loadding, this.currentTab, false)
					} else {
						this.$set(this.loadding, this.currentTab, false)
						this.$set(this.pullUpOn, this.currentTab, true)
					}
				})
			},
			initpara() {
				let leg = this.tabTitle.length
				this.pages = Array(leg).fill(1)
				this.pullUpOn = Array(leg).fill(false)
				this.loadding = Array(leg).fill(false)
				for (var i = 0; i < leg; i++) {
					this.$set(this.list, i, Array.of())
				}
			}
		},
		onLoad() {
			that = this;
			this.initpara()
			if (this.$db.get('token')) {
				this.login = true
				let userinfo = this.$store.getters.getUserInfos
				this.userinfo=userinfo
			} else {
				uni.login({
					success(res) {
						if (res.code) {
							that.wxLoginStep(res.code)
						} else {
							that.$common.errorToShow('未取得code')
						}
					},
					fail() {
						that.$common.errorToShow('获取code失败')
					}
				})
			}
		},
		onShow() {
			this.login && this.initUserInfo()
		},
		onReachBottom() {
			this.isRequest()
		}
	}
</script>

<style scoped lang="scss">
	.center {
		display: flex;
		flex-direction: column;
		min-height: 100vh;
		background-color: #FFFFFF;
	}

	.logo {
		width: 750upx;
		height: 450upx;
		padding: 20upx;
		padding-left: 40upx;
		/* 		padding-top: 200upx; */
		box-sizing: border-box;
		background-color: #42BD56;

		.userName {
			display: flex;
			flex-direction: row;
			align-items: center;
			margin-top: 80upx;
		}

		.userInfo {
			margin-top: 24upx;
			color: #FFFFFF;
			padding-left: 20upx;

			.userid {
				height: 38upx;
				width: 170upx;
				line-height: 38upx;
				opacity: 0.9;
				border-radius: 8upx;
				font-size: 23upx;
				font-family: PingFang SC;
				font-weight: bold;
				color: rgba(255, 255, 255, 1);
			}

			.sex {
				font-size: 23upx;
				font-family: PingFang SC;
				font-weight: bold;
				color: rgba(255, 255, 255, 1);
				line-height: 30upx;
			}
		}
	}

	.logo-hover {
		opacity: 0.8;
	}

	.logo-img {
		width: 150upx;
		height: 150upx;
		border-radius: 150upx;
	}

	.logo-title {
		height: 150upx;
		flex: 1;
		align-items: center;
		justify-content: space-between;
		flex-direction: row;
		margin-left: 20upx;
	}

	.uer-name {
		height: 60upx;
		line-height: 60upx;
		font-size: 38upx;
		color: #FFFFFF;
	}

	.login-btn {
		color: #fff;
		width: 180upx;
		height: 50upx;
		line-height: 50upx;
		border-radius: 25upx;
		/* background: #ff7159; */
		background-color: transparent;
		border: 2upx solid #fff;
		font-size: 12px;
	}
</style>
